<template>
	<view class="container">
		<view class="header">
			<u-search @search="handeleSearch" @custom="handeleSearch"  placeholder="搜索货品名称/搜索货品编号" v-model="keyword"></u-search>
		</view>
		<view class="title">热门搜索</view>
		<view class="popular">
			<view class="popularBlock" v-for="(item,index) in popular" :key="index">{{item.name}}</view>
		</view>
		<view class="history">
			<view>历史搜索</view>
			<view class="flex" @click="handeleRemove">
				<image style="width: 27rpx;height: 30rpx;" src="/static/work/sc_del.png" mode=""></image>
				<view style="margin-left: 7rpx;">清空历史记录</view>
			</view>
		</view>
		<view class="popular">
			<view class="popularBlock" v-for="(item,index) in list" :key="index">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				keyword:'',
				popular:[ //热门搜索
					{id:1,name:'有机大白菜'},
					{id:2,name:'TM-2025020200'},
					{id:3,name:'五常大米'},
					{id:4,name:'冻鸡翅'},
					{id:5,name:'纯牛奶'}
				],
				list:[//历史搜索
					{id:2,name:'天顺原杨切肉'},
					{id:3,name:'纯牛奶'},
				]
			}
		},
		onLoad() {
			
		},
		methods:{
			handeleSearch(){
				console.log('搜索');
			},
			// 清空历史记录
			handeleRemove(){
				uni.showModal({
					title: '提示',
					content: '确认清空历史信息？',
					success: res => {
						if (res.confirm) {
							this.list = []
						}
					}
				});
				
			}
		}
	}
</script>

<style scoped>
	.flex{
		display: flex;
		align-items: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #404040;
	}
	.popularBlock{
		min-width: 100rpx;
		height: 52rpx;
		padding: 11rpx 17rpx;
		box-sizing: border-box;
		border: 1rpx solid #E8E8E8;
		margin: 11rpx 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		border-radius: 2rpx;
		color: #666666 ;
	}
	.popular{
		width: 100%;
		min-height: 52rpx;
		display: flex;
		flex-wrap: wrap;
		padding: 0 22rpx;
		box-sizing: border-box;
	}
	.history{
		width: 100%;
		height: 60rpx;
		font-family: Microsoft YaHei;
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		padding: 0 44rpx;
		box-sizing: border-box;
		margin-top: 40rpx;
		margin-bottom: 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.title{
		width: 100%;
		height: 60rpx;
		font-family: Microsoft YaHei;
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		padding: 0 44rpx;
		box-sizing: border-box;
		margin-top: 50rpx;
	}
	.header{
		width: 100%;
		padding: 10rpx 46rpx;
		box-sizing: border-box;
	}
	.container{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>